<!-- 用户管理组织管理 -->
<template>
  <div class="page_content">
    <div class="user-management">
      <div class="user-management-left">
        <div class="user-management-left-search">
          <el-input
            v-model="organization"
            style="max-width: 100%"
            placeholder="请输入组织名称"
          >
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
        <div class="user-management-left-bottom">
          <el-tree
            style="font-size: 16px; width: 100%; overflow: auto;"
            :data="data"
            show-checkbox
            @check-change="changeEvt"
            node-key="id"
            :props="{children: 'children', label: 'label'}"
          />
        </div>
      </div>
      <div class="user-management-right">
        <div class="search-box"></div>
        <el-table @selection-change="handleSelectionChange" ref="multipleTableRef" size='small' :highlight-current-row="true" :data="tableData" border style="width: 100%">
          <el-table-column type="selection" align="center" width="55" />
          <el-table-column prop="organizationName" label="组织名称" show-overflow-tooltip/>
          <el-table-column prop="AffiliatedOrganization" label="所属组织" show-overflow-tooltip/>
          <el-table-column prop="contacts" label="联系人" show-overflow-tooltip/>
          <el-table-column prop="phone" label="联系电话" show-overflow-tooltip/>
          <el-table-column prop="address" label="联系地址" show-overflow-tooltip/>
          <el-table-column align="center">
            <template #header>
              <div class="tab-flex">
                <span>操作</span>
              </div>
            </template>
            <template #default="scope">
              <el-button size="small" type="text" @click="editForm = JSON.parse(JSON.stringify(scope.row)), editDrawer = true">修改</el-button>
              <el-button size="small" type="text" @click="delOrganization(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Paging ref="paging" url="/captcha" method="get" :small="true"></Paging>
      </div>
    </div>

    <!-- 新增修改组织弹窗 -->
    <el-drawer
      style="padding-bottom: 0;"
      v-model="editDrawer"
      :title="`${editForm.id ? '修改' : '新增'}组织`"
      direction="rtl"
      size="600px"
    >
      <el-form
        ref="editForms"
        :rules="editRules"
        :model="editForm"
        label-width="auto"
        label-position="top"
      >
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="所属组织" prop="name">
            <el-input :disabled="editForm.id ? true : false" v-model="editForm.contacts" placeholder="请输入所属组织"/>
          </el-form-item>
        </el-col>
        <el-col :span="12"><div/>
          <el-form-item label="组织名称" prop="name">
            <el-input v-model="editForm.name"  placeholder="请输入组织名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12"><div/>
          <el-form-item label="联系人" prop="name">
            <el-input v-model="editForm.name" placeholder="请输入联系人" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12"><div/>
          <el-form-item label="联系电话" prop="name">
            <el-input v-model="editForm.name" placeholder="请输入联系电话" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24"><div/>
          <el-form-item label="联系地址">
            <el-input  placeholder="请输入联系地址" :autosize="{ minRows: 3, maxRows: 8 }" type="textarea" v-model="editForm.name"/>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>

      <!-- 自定义叶尾 -->
      <template #footer>
        <el-button @click="editDrawer = false">
          取消
        </el-button>
        <el-button type="primary">
          保存
        </el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import Paging from '../../../components/paging.vue'
import { Search } from '@element-plus/icons-vue'
import {ref, watch} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 表格数据
let tableData = Array.from({length: 20}, (_, index) => ({  
  id: index + 1,  
  organizationName: '都经交投都投集' + index,
  AffiliatedOrganization: "都经交投民主A6充电" + index,
  phone: 1762369810 + index,
  address: '成都市武侯区' + index,
  contacts: "孙豪" + index
}))

// 新增修改弹窗表单
const editForms = ref(null)

// 新增修改组织抽屉
const editDrawer:boolean = ref(false)

// 删除组织
const delOrganization = (row: any):any => {
  ElMessageBox.confirm(
    '确认删除 都经交投民主A6充电站 吗？?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  })
  .catch(() => {})
}

// 修改组织表单
const editForm = ref({})

// 表格多选数据
const tableSelectList = ref([])

// 表格多选
const handleSelectionChange = (e:any):void => {
    tableSelectList.value = e
}

// 监听新增修改组织弹窗
watch(
  editDrawer,
  (e) => {
    if(!e) {
      editForms.value.resetFields()
      editForm.value = {}
    }
  }
)

// 新增修改组织表单校验
const editRules = {
  name: [
    { required: true, message: '请输入联系人', trigger: 'blur' },
  ]
}

// 分页组件
const paging = ref(null)

// 组织查询输入框
const organization:string | number | undefined = undefined

// 选中的组织
const selectList = ref([])

// 组织查询节点点击处理事件1并发起请求
const changeEvt = (data,isSelect,c) => {
  if(data.children && !isSelect) {
    selectList.value = selectList.value.filter(it => it != data.id)
  } else if(data.children && isSelect) {
    selectList.value.push(data.id)
  }
  paging.value.getData(true)
}

// 所属组织数据
const data = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1 Level three 1-1-1 Level three 1-1-1 Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
</script>

<style scoped lang="scss">
.page_content{
  width: 100%;
  height: 100%;
}
.user-management {
  width: 100%;
  height: calc(100vh - 120px);
  display: flex;
  justify-content: space-between;
}
.user-management-left {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
  // background: pink;
  margin: 0 15px;
  .user-management-left-search {
    margin: 15px 0;
    font-size: 14px;
    width: 100%;
  }
  .user-management-left-bottom {
    width: 100%;
    height: calc(100% - 100px);
    overflow: auto;
  }
}

.user-management-right {
  width: calc(100% - 320px);
  height: 100%;
  margin: 15px 0 0 0;
  .search-box {
    width: 100%;
    height: 60px;
    margin-bottom: 15px;
    background: pink;
  }
}

::v-deep .el-tree-node__children {
  overflow-x: auto !important;
}

.tab-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .el-drawer__header {
  margin-bottom: 0;
}
</style>
